
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/main.css">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
<title>总部</title>


<style>
.main_div {
	min-width: 1000px
}

.productListDetaile>td:nth-child(7) {
	cursor: pointer;
	color: #269ae0
}

#allType li {
	display: block;
	width: 300px;
	list-style: none;
	line-height: 40px; position; relative;
	margin-left: 60px;
	cursor: pointer;
}

#allType input {
	display: block;
	float: left;
	width: 100px
}

.bgBox2 {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.26);
	/*background-color: black;*/
	/*opacity: 0.3;*/
	z-index: 100;
	visibility: hidden;
	/*border: 1px solid red;*/
}

#box2 {
	width: 240px;
	height: 158px;
	border-radius: 6px;
	position: relative;
	margin: 150px auto;
	background-color: #ffffff;
	padding-left: 20px;
	padding-top: 20px
}

#box2>input {
	display: block;
	width: 150px;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	margin: 20px 0;
}

#box3 {
	width: 210px;
	height: 158px;
	border-radius: 6px;
	position: relative;
	margin: 150px auto;
	background-color: #ffffff;
	padding-left: 20px;
	padding-top: 20px
}

#box3>input {
	display: block;
	width: 150px;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	margin: 20px 0;
}

.btnGroup>button {
	margin-right: 30px;
}
</style>
</head>

<body>
	<%@ include file="header.jsp"%>
	<%@ include file="left.jsp"%>
	<div id="index"
		style="position: absolute;left: 180px;top: 80px;bottom: 0;right: 0;">
		<section id="main">

			<div class="main_div">
				<div class="main_title">
					<span>商品管理</span>
				</div>
				<form class="form-inline" style="margin-top: 30px;margin-left: 20px">
					<div class="form-group">
						<label for="ProductName"> 添加顶级分类:</label> <input type="text"
							class="form-control" id="listName" placeholder="">
					</div>
					<button class="btn btn-primary" onclick="addTopList()">确认添加</button>
				</form>
			</div>

			<div class="scrollbar1-3 " id="style1-1">
				<ul id="allType"></ul>
			</div>
		</section>


		<script>
			var parentsID;
			var producrtsID;
			$(function() {
				getGoodsTtype()
			})
			function slideUl(e) {
				$(e).children("ul").empty();
				$(e).children("ul").slideToggle(0);
				$(e).children("ul").click(function(event) {
					event.stopPropagation();
				});
				$(e).children("button").click(function(event) {
					event.stopPropagation();
				});
				//console.log(e.id)
				$.post(urls + "superMarketAction/getGoodsType2",
					{
						typeID : e.id
					},
					function(data) { //data 为list
						//console.log(data)
						for (var i = 0; i < data.length; i++) {
							var span = $("<span class='glyphicon glyphicon-chevron-right' style='float:left;line-height:40px'></span>");
							var input = $("<button class='btn btn-primary' style='float:right' onclick='changeName(this)' id='" + data[i].id + "' value='" + data[i].goodsName + "'>修改</button>")
							var li = $("<li>" + data[i].goodsName + "</li>");
							li.append(input).append(span)
							$(e).children("ul").append(li);
						}
					})
			}
			function addTopList() {
				if ($("#listName").val()) {
					$.post(urls + "utilAction/addGoodsType",
						{
							parentId : 0,
							goodsName : $("#listName").val()
						},
						function(res) {
							//console.log(res)
							if (res) {
								getGoodsTtype()
							} else {
								alert("添加顶级分类失败")
							}
						})
		
				} else {
					alert("请输入顶级分类的名称")
				}
		
			}
			function addChildren(e) {
				$("#motai2").css("visibility", "visible");
				$("#names2").empty();
				parentsID = e;
		
			}
			function sureAdd() {
			 if(!$("#names2").val()){
			  alert("不能为空");
			  return;
			  }
				$.post(urls + "utilAction/addGoodsType",
					{
						parentId : parentsID,
						goodsName : $("#names2").val()
					},
					function(res) {
						// console.log(res)
						if (res) {
							alert("添加子类成功")
						} else {
							alert("添加顶级分类失败")
						}
					})
				motaiHidden()
			}
			function changeName(e) {
				$("#motai").css("visibility", "visible");
				$("#names").empty();
				$("#names").val(e.value);
				productsID = e.id;
			}
			function sureChange() {
			  if(!$("#names").val()){
			   alert("不能为空");
			  return;
			  }
				$.post(urls + "utilAction/updateGoodsType",
					{
						id : productsID,
						goodsName : $("#names").val()
					},
					function(res) {
						//console.log(res)
						if (res) {
							alert("添加子类成功") ;
		
						} else {
							alert("添加顶级分类失败")
						}
					})
				motaiHidden()
			}
			function motaiHidden() {
				$("#motai").css("visibility", "hidden");
				$("#motai2").css("visibility", "hidden");
			}
		
			function getGoodsTtype() {
				$.post(urls + "superMarketAction/getGoodsType",
					{},
					function(res) {
						//console.log(res)
						var allType = $("#allType");
		
						for (var i = 1; i < res.length; i++) {
							var span = $("<span class='glyphicon glyphicon-record' aria-hidden='true' style='margin-right:5px'> </span>")
							var input = $("<button type='button'  style='float:right' class='btn btn-primary' onclick='addChildren(\"" + res[i].id + "\")'>添加子类</button>");
							var li = $("<li id='" + res[i].id + "' onclick='slideUl(this)'></li>");
							$(li).append(span).append(res[i].goodsName).append(input)
								.append("<ul></ul>")
								.appendTo(allType)
						}
		
					})
			}
		</script>
	</div>
	<div class="bgBox2" id="motai" style="visibility:hidden">
		<div id="box2">
			<h3>修改商品名称</h3>
			<input id="names" type="text" />
			<div class="btnGroup">
				<button onclick="sureChange()" class="btn btn-primary btn-success">确认修改</button>
				<button onclick="motaiHidden()" class="btn btn-primary">取消</button>
			</div>
		</div>
	</div>
	<div class="bgBox2" id="motai2" style="visibility:hidden">
		<div id="box3">
			<h3>添加子类名称</h3>
			<input id="names2" type="text" />
			<div class="btnGroup">
				<button onclick="sureAdd()" class="btn btn-primary btn-success">确认</button>
				<button onclick="motaiHidden()" class="btn btn-primary">取消</button>
			</div>
		</div>
	</div>
</body>
</html>
